<template>
    <div class='container'>
        <!-- :visible.sync="addDialog" -->
       <el-dialog :title="node.id ? '修改目录' : '新增目录'" :visible="showDialog" @close="btnCancel">
            <el-form  ref="dataForm"  label-position="left" label-width="120px"
                style="width: 400px; margin-left:120px;" :rules="rules" :model="FormData">

                <el-form-item label="所属学科" prop="subjectID">
                      <el-select  placeholder="请选择" v-model="FormData.subjectID" @focus="list">
                        <el-option v-for="item in subject" :key="item.id" :label="item.subjectName" :value="item.subjectID">
                        </el-option>
                      </el-select>
                </el-form-item>

                <el-form-item label="目录名称"  prop="tagName">
                    <el-input  placeholder="请输入目录名称" v-model="FormData.tagName"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button  @click="btnCancel">取 消</el-button>
                 <el-button type="primary" @click="btnOk">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { add,detail,update,list } from '@/api/hmmm/tags.js'
export default {
    props:{
        showDialog:{
            type:Boolean,
            require:true
        },
        node: {
            type: Object,
            default: {}
        }
    },
    data(){
        return{
            FormData:{
            subjectID:'',
            tagName:'',
           },
            subject:[], 
            rules:{
            subjectID: [{ required: true, message: '请选择学科',trigger: 'blur' }],
            tagName:[{ required: true, message: '请输入内容',trigger: 'blur'}]
           }
        }
    },
     methods:{
         async list() {
         const {data}= await list();
         this.subject = data.items
         console.log(this.subject);
         },
    
         async detail(node) {
            console.log(1)
            let { data } = await detail(node)
            console.log(data);
            this.FormData.subjectID= data.subjectID
            this.FormData.tagName = data.tagName
        },
    async  btnOk () {
       await this.$refs.dataForm.validate()
            if (this.node.id) {
                await update({ id: this.node.id, ...this.FormData })
            } else {
                console.log(456)
                console.log(this.FormData)
                await add({...this.FormData})
            }
        // 重新渲染页面
                this.$emit('updateFrom')
                // 成功提示
                 this.$message.success(this.node.id ? '修改学科成功啦!' : '新增学科成功啦!')
                // 关闭弹窗
                // .sync 固定写法('update:props名称',值)
                // 语法糖:等同于给属性值加一个自定义事件 ('update:props名称', 要修改的值)
                this.$emit('update:showDialog', false)
    },
    async btnCancel () {
 // 1.关闭弹窗 隐藏 会一直在文档中
            
            // 2.清空数据和表单验证
          await  this.$refs.dataForm.clearValidate()  //只能清空表单绑定的数据
            // 手动清空数据 清空和表单无关的数据
            this.FormData = {
               subjectName:'',
               tagName:'',
            },
            this.$emit('update:showDialog', false)
    }
    }
    }
</script>

<style scoped lang='less'></style>
